.AppDrawer {
  @apply shadow-lg rounded-xl relative flex-col;
  background-color: rgba(var(--design-rgba-near), 0.2);
  margin: 24px;
  transition: all 0.3s;


  .top {
    .appCompBg();
    @apply flex shadow justify-between items-center px-6 py-3 z-10 rounded-t-xl;
  }

  &::-webkit-scrollbar {
    display: none;
  }

  .Widgets {
    padding: 24px;
    height: 60vh;
    @apply absolute bottom-0 right-0 left-0 bg-yellow-200 rounded-xl overflow-auto;
    transition: all 0.4s;
    transform: translateY(100%);
    opacity: 0;

    &::-webkit-scrollbar {
      display: none;
    }

    .appCompBgLg();
    .app-shadow();
  }

  .WidgetsVisible {
    transform: translateY(0%);
    opacity: 1;
  }
}